<template>
	<view class="tag-content" :class="{'tag-content-active': item.tagId === -1}">
		<view class="desc">
			<image :src="item.tagImage" v-if="item.tagImage"></image>
			{{ item.tagName || item }}
		</view>			
	</view>
</template>

<script>
export default {
	name: "customtag",
	props: {
		item: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {};
	},
	mounted() {
		console.log('customtag组件收到的item:', this.item);
	}
}
</script>

<style lang="less" scoped>
	.tag-content {
		display: flex; // 修改为flex以便内容居中
		background-color: #3F3F3F1A;
		height: 45rpx;
		border-radius: 27.5rpx; // 圆角为高度
		align-items: center;
		justify-content: center;
	}

	.desc {
		font-size: 24rpx;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		padding: 0rpx 20rpx;
		width: 100%;
		height: 100%;
		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 6rpx;
		}
	}
	.tag-content-active {
		background-color: #C6282B;
		border: 1px solid #C6282B;
		color: #fff;
	}
</style>